<script>
import InfoDetail from '@/views/mall/managementend/ordergoods/sidebar-order/infoDetail.vue'
import { orderDetailById } from '@/api/mallApi/order'

export default {
  name: 'infoList',
  components: { InfoDetail },
  props: {
    activeName: {
      type: String,
      default: '1'
    },
    tableData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 分页
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 弹窗数据
      dialogData: {},
      dialogVisible: false
    }
  },
  created() {},
  methods: {
    handleClick(row) {
      orderDetailById({ id: row.id }).then((res) => {
        if (res.code === '00000') {
          this.dialogData = res.data
          // 打开弹窗
          this.dialogVisible = true
        }
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      // 触发父组件的方法
      this.$emit('handleCurrentChange', this.pageNum)
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // => 关闭弹窗
    close() {
      this.dialogVisible = false
    },
    // 重新加载数据
    reLoad() {
      this.$emit('reLoad')
    }
  }
}
</script>

<template>
  <div class="infoList">
    <div class="table" style="margin-top: 20px">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
      >
        <!--orderDetailesList-->
        <el-table-column prop="mallName" label="店铺名称"></el-table-column>
        <el-table-column
          prop="orderCode"
          label="订单编号"
          width="600"
        ></el-table-column>
        <el-table-column prop="status" label="状态" width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="warning"
            >待处理
            </el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success"
            >已处理
            </el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger"
            >已驳回
            </el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="danger"
            >已打款
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      fullscreen
      title="订单详情"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <InfoDetail
        ref="infoDetail"
        :activeName="activeName"
        :dialogData="dialogData"
        @close="close"
        @reLoad="reLoad"
      ></InfoDetail>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.block {
  display: flex;
  align-items: end;
  justify-content: end;
}
</style>
